/*
 * @Author: monster.huangwei 
 * @Date: 2018-11-04 17:32:21 
 * @Last Modified by: monster.huangwei
 * @Last Modified time: 2019-01-15 21:25:11
 */
*{
  padding: 0;
  margin: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

button {
  border: none;
  cursor: pointer;
  display: block
}

i{
  display: block;
}

#app {
  width: 100%;
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.box {
  display: -moz-box;
  display: -webkit-box;
  display: box;
  display: -o-box;
}

.box-1 {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  box-flex: 1;
}

.boxSizing{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.space-between{
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
}

.horizontal-center {
  -moz-box-pack: center;
  -webkit-box-pack: center;
  -o-box-pack: center;
  box-pack: center;
}

.vertical-center {
  -moz-box-align: center;
  -webkit-box-align: center;
  -o-box-align: center;
  box-align: center;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.align-left {
text-align: left;
}

.btn-gray {
  background-color: rgb(199, 199, 199);
}

.btn-yellow {
  background-color: #CDCD00;
}



@media screen and (min-width: 310px) and (max-width: 350px) {
  html, body {
    font-size: 13px;
  }
}

@media screen and (min-width: 351px) and (max-width: 370px) {
  html, body {
    font-size: 14px;
  }
}

@media screen and (min-width: 371px) and (max-width: 400px) {
  html, body {
    font-size: 16px;
  }
}

@media screen and (min-width: 401px) and (max-width: 420px) {
  html, body {
    font-size: 18px;
  }
}

.up-enter-active, .up-leave-active {
  transition: transform 0.2s ease
}
.up-enter, .up-leave-to {
  transform:translateY(100%);
  -webkit-transform:translateY(100%);
}
.fade-enter-active, .fade-leave-active {
  transition: all 0.5s ease
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}